<template>
	<view>
		<view style="position: fixed;top:0;background: #F8F9FD;z-index: -2;width:100%;height:100vh;"></view>

		<view v-if="step == 1">
			<view class="zdyFormItem" style="margin-top: 24rpx;box-sizing: border-box;">
				<view class="zFormIptw">
					<view class="d1" style="margin-right: auto;">员工姓名</view>
					<view style="text-align: right;">
						<input type="text" placeholder="请输入" v-model="form.name" />
					</view>
				</view>
				<u-line color="#EBEDF0"></u-line>
				<view class="zFormIptw">
					<view class="d1" style="margin-right: auto;">手机号</view>
					<view style="text-align: right;">
						<input type="number" placeholder="请输入" v-model="form.phone" />
					</view>
				</view>
			</view>

			<view style="width:calc(100vw - 48rpx);margin:0 auto;padding-top: 30px;">
				<view class="bottombtn" style="width: 100%;border-radius: 22px;" @click="submitForm">
					确定</view>
			</view>
		</view>

		<view v-if="step==2"
			style="text-align:center;calc(100vw - 48rpx);margin:0 auto;padding-top:100rpx;background: #F8F9FD;">
			<view class="zflex" style="justify-content: center;">
				<uni-icons type="checkbox-filled" size="80" color="#03AF45"></uni-icons>
			</view>

			<view style="margin-top: 24rpx;font-size: 36rpx;">新增员工完成</view>

			<view style="width:100vw;padding:96rpx 96rpx;box-sizing: border-box;display: flex;gap: 24px;">
				<view class="base_btn2" @click="pageBack()">返回员工列表</view>
				<view class="base_btn2" @click="again()">再次新增
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		testMobile
	} from '@/utils/common'
	import {
		editStaff,
		addStaff,
		staffDetail,
	} from '@/request/api.js'
	export default {
		data() {
			return {
				step: 1,
				pageFrom: '',
				form: {
					id: '',
					name: '',
					phone: '',
				},
			}
		},
		onLoad(e) {
			this.pageFrom = e.pageFrom;
			if (e.pageFrom) {
				this.form.id = e.pageFrom;
				this.getDetail()
				uni.setNavigationBarTitle({
					title: '编辑'
				});
			}
		},
		methods: {
			getDetail() {
				staffDetail({
					userId: this.pageFrom
				}).then(res => {
					this.form = res.data
					this.form.id = res.data.userId
				})
			},
			submitForm() {
				if (!testMobile(this.form.phone)) {
					return
				}
				if (this.form.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入员工姓名',
						duration: 1500
					});
					return;
				}

				if (!this.pageFrom) {
					//this.form.id = this.pageFrom
					addStaff(this.form).then(res => {
						uni.$u.toast('编辑成功')
						uni.navigateBack()
					})
				} else {
					editStaff(this.form).then(res => {
						uni.$u.toast('编辑成功')
						uni.navigateBack()
					})
				}

			},
			again() {
				this.step = 1;
				this.form.loginName = '';
				this.form.name = '';
			},
			pageBack() {
				uni.navigateBack()
			},
			goPage(e) {
				uni.navigateTo({
					url: e
				})
			},
		}
	}
</script>

<style scoped>
	.btnsS2 {
		width: 48%;
	}

	.styles2 {
		border: 1px solid #E5E6EB;
		color: #252733;
		margin: 16rpx 20rpx 16rpx 0;
	}

	.zdyFormItem {
		width: 100%;
		background: #fff;
		padding: 0 24rpx;
	}

	.zFormIptw {
		display: flex;
		height: 92rpx;
		align-items: center;
		position: relative;
	}

	.d1 {
		margin-right: 60rpx;
	}

	.d3 {
		position: absolute;
		right: 48rpx;
		color: #4475EE;
	}

	.base_btn2 {
		border-radius: 8px;
		border: 1px solid #4475EE;
		display: flex;
		padding: 18rpx 0;
		color: #4475EE;
		font-size: 32rpx;
		justify-content: center;
		align-items: center;
		width: 50%;
	}
</style>